<!--
 * @Author: your name
 * @Date: 2020-06-02 15:07:35
 * @LastEditTime: 2020-08-19 09:44:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \gamevue\src\views\discounts\components\Echarts.vue
-->
<template>
    <div class="content_ecahrts">
        <van-nav-bar title="亚洲地图" :border="false" fixed left-arrow @click-left='$router.push("/")'/>
        <div class="echarts" ref="echarts"></div>
        <div class="block">
            <el-slider @change="Change" v-model="value" :max="10" vertical height="200px"></el-slider>
        </div>
    </div>
</template>

<script>
import echarts from "echarts";
import loadBMap from "@/assets/js/map.js";
import nameMap from "@/assets/js/nameMap.js"; //地图名字映射
import Asia from "@/assets/js/Asia.js"; //亚洲地图
import Color from "@/assets/js/color.js";
export default {
    data() {
        return {
            tick1: false,
            data1: [],
            value: 1,
            name_1: "",
            myChart: {}, //地图对象
            selected_city: [] //已经选择过的国家
        };
    },
    mounted() {
        this.countryList();
    },
    methods: {
        Tick() {
            this.tick1 = true;
            this.selected_city = [];
            this.name_1 = "";
            this.countryList();
            this.initecharts();
            let time = window.setTimeout(() => {
                this.tick1 = false;
                window.clearTimeout(time);
            }, 1000);
            this.$emit("change1", "");
        },
        // 改变大小
        Change(value) {
            this.initecharts(value);
        },
        // 随机颜色
        RandomColor() {
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return "rgb(" + r + "," + g + "," + b + ",.4)"; //所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
        },
        initColor() {
            let list = [];
            let arr = Object.values(nameMap);
            arr.forEach((item, index) => {
                let color = "";
                Color.forEach((item_, index_) => {
                    if (item_.name == item) {
                        color = item_.color;
                    }
                });
                list.push({
                    start: index,
                    end: index,
                    name: item,
                    value: index,
                    color: color ? color : this.RandomColor()
                });
            });
            return list;
        },
        // 国家排行
        countryList() {
            // this.$api.countryList().then(res => {
            // if (res.data.code == 1) {
            // let list = res.data.data;

            this.data1 = this.initColor();

            this.initecharts();

            //     }
            // });
        },
        initecharts(zoom) {
            echarts.registerMap("Asia", Asia);
            let myChart = echarts.init(this.$refs.echarts);
            // 配置option
            let taht = this;
            var option = {
                title: {
                    text: "亚洲地图",
                    x: "50",
                    y: "250",
                    textStyle: {
                        fontSize: 22
                    },
                    triggerEvent: true
                },

                backgroundColor: {
                    type: "radial",
                    x: 0.5,
                    y: 0.5,
                    r: 0.7,
                    colorStops: [
                        {
                            offset: 0,
                            color: "#75a2d2" // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: "#afd9fa" // 100% 处的颜色
                        }
                    ],
                    global: false // 缺省为 false
                },
                // visualMap: {
                //     // min: 1,
                //     // max: 100,
                //     // text: ["", "排名"],
                //     // realtime: false,
                //     // calculable: true,
                //     // inRange: {
                //     //     color: ["red", "yellow"]
                //     // }
                // },
                roam: "move", //滚轮缩放
                series: [
                    {
                        type: "map",
                        // mapType: "world",
                        map: "Asia",
                        slient: false, //禁止点击事件
                        zoom: zoom ? zoom : 1.3,
                        left: 300,
                        top: 60,
                        right: 300,
                        bottom: 60,
                        boundingCoords: [
                            // 定位左上角经纬度
                            [50, 55],
                            // 定位右下角经纬度
                            [140, -5]
                        ],
                        label: {
                            normal: {
                                show: true,
                                position: "right",
                                formatter(v) {
                                    return v.name == taht.name_1
                                        ? taht.name_1
                                        : "";
                                },
                                textStyle: {
                                    color: "#333",
                                    fontSize: 18,
                                    fontWeight: "bold"
                                }
                            },
                            emphasis: {
                                //鼠标移入动态的时候显示的默认样式
                                show: true,
                                formatter(v) {
                                    return v.name;
                                }
                            }
                        },
                        data: this.data1,
                        nameMap: nameMap, //中英文地图名字映射
                        itemStyle: {
                            emphasis: {
                                areaColor: "#ff4d3a",
                                label: {
                                    show: true,
                                    textStyle: {
                                        color: "#333",
                                        fontSize: 18,
                                        fontWeight: "bold"
                                    }
                                }
                            }
                        }
                    }
                ],
                dataRange: {
                    splitList: this.data1,
                    show: false
                    // splitList: [
                    //     { star: 1, end: 1, name: "中国", color: "#CBBF0B" },
                    //     { name: "日本", color: "#D51716" },
                    //     { name: "台湾", color: "#5C649F" },
                    //     { name: "越南", color: "#E54E20" },
                    //     { name: "新加坡", color: "#6D6342" },
                    //     { name: "菲律宾", color: "#9F7A0F" },
                    //     { name: "泰国", color: "#CBBF0B" },
                    //     { name: "马来西亚", color: "#EC8F13" },
                    //     { name: "哈萨克斯坦", color: "#5B79B7" },
                    //     { name: "印度尼西亚", color: "#A696C3" },
                    //     { name: "印度", color: "#E0AF6A" }
                    // ]
                }
            };
            myChart.setOption(option);
            myChart.on("click", params => {
                this.name_1 = "";
                // 在用户点击后控制台打印数据的名称
                if (params.componentType != "title") {
                    if (!params.data) {
                        this.$toast("您所选择的国家暂未开通");
                        return;
                    }
                }
                this.$emit("change1", params.data); //触发选中国家事件
                // 无用的请求国家排行
                // this.countryList();

                //新方法优化选择
                this.data1.map(item => {
                    this.selected_city.forEach(item_ => {
                        if (item.name == item_.name) {
                            item.color = item_.color;
                        }
                    });
                    if (params.name == item.name) {
                        let color = item.color;
                        // 保存选择国家的上一个状态
                        this.selected_city.push({
                            name: params.name,
                            color: color
                        });
                        this.name_1 = params.name;
                        item.color = "#f00";
                    }
                });
                // 更新数据
                this.$forceUpdate();
                myChart.setOption(option, true);
            });
        }
    }
};
</script>

<style lang="less" scoped>
.tick {
    position: absolute;
    right: 30px;
    top: 60px;
    z-index: 100;
    // width: 220px;
    .click_ {
        display: block;
        width: 80px;
        height: 80px;
        position: absolute;
        top: -60px;
        right: -20px;
        z-index: inherit;
        transform: rotate(180deg);
    }
    p {
        font-size: 24px;
        color: #000;
        display: flex;
        align-items: center;
        font-weight: bold;
        // cursor: default;
        cursor: pointer;
        span {
            display: block;
            cursor: pointer;
        }
    }
    // img {
    //   width: 250px;
    //   height: auto;
    //   cursor: pointer;
    // }
}
.block {
    position: absolute;
    right: 4px;
    bottom: 10px;
    z-index: 100;
}
.content_ecahrts{
    padding-top: 100px;
}
.echarts {
    position: relative;
    width: 100%;
    height: 560px;
    // background: linear-gradient(to right, #333, red);
}
.tick1 {
    animation: mymove 2s linear infinite;
}
@keyframes mymove /*Safari and Chrome*/ {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(1);
    }
}
</style>
